<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

	Drag resize example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

	Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<!-- HTML form containing reset button -->
<DIV STYLE='padding:0px 0px 0px 20px'>
<form action="" method="POST" name="f">
<input type="Button" name="reset" onclick="resetWidgets()" value="Reset Widgets">
</form>
</DIV>

<SCRIPT>

// --------------------------------------------------
// A Function for the HTML form to reset the widgets
// --------------------------------------------------

function resetWidgets(){
    dragTargetResize.moveTo(50,125);
    dragTargetResize.resizeTo(100,100);

    dragOutlineResize.moveTo(250,125);
    dragOutlineResize.resizeTo(100,100);

    dragLeftRightResize.moveTo(50,325);
    dragLeftRightResize.resizeTo(100,100);

    topParent.moveTo(250,325);
    topParent.resizeTo(100,100);

}

// --------------------------------------------------
// A Widget showing dragTargetResize on all edges
// --------------------------------------------------

Canvas.create({
    ID:"dragTargetResize",
    left:50,
    top:125,
    width:100,
    height:100,
    minHeight:50,
    minWidth:50,
    overflow:"hidden",
    contents:"dragAppearance set to <i>Target<\/i>.<br>Can Resize from all corners and sides.",
    backgroundColor:"violet",
    canDragResize:true,
    resizeFrom:null,    // All corners/edges
    dragAppearance:"target"
});


// --------------------------------------------------
//    Outline Resize widget...
// --------------------------------------------------
Canvas.create({
    ID:"dragOutlineResize",
    left:250,
    top:125,
    width:100,
    height:100,
    minHeight:50,
    minWidth:50,
    overflow:"hidden",
    contents:"dragAppearance set to <i>Outline<\/i>.<br>Can Resize from all corners and sides.",
    backgroundColor:"gold",
    canDragResize:true,
    resizeFrom:null,    //All corners/edges
    dragAppearance:"outline"

});

// --------------------------------------------------
//    Resize from Left and Right only
// --------------------------------------------------
Canvas.create({
    ID:"dragLeftRightResize",
    left:50,
    top:325,
    width:100,
    height:100,
    minWidth:50,
    overflow:"hidden",
    contents:"dragAppearance unspecified.<br>Can Resize from left and right sides.",
    backgroundColor:"lightgreen",
    canDragResize:true,
    resizeFrom:["L","R"]

});


// --------------------------------------------------
//    Parent of next widget
// --------------------------------------------------
Canvas.create({
    ID:"topParent",
    left:250,
    top:325,
    width:100,
    height:100,
    minWidth:50,
    minHeight:50,
    overflow:"hidden",
    dragAppearance:"target",
    contents:"Widget resized by a child widget.",
    backgroundColor:"salmon",
    layoutChildren:function() {
        this.Super("layoutChildren", arguments);
        var resizeBox = this.children[0];
        resizeBox.moveTo(this.getWidth()-resizeBox.getVisibleWidth(),
                         this.getHeight()-resizeBox.getVisibleHeight());
    }
});

// --------------------------------------------------
//    child widget used as a 'handle' to resize its parent
// --------------------------------------------------
Canvas.create({
    ID:"dragResizeBox",
    autoDraw:false,
    left:50,
    top:75,
    width:50,
    height:25,
    contents:"Resize Box",
    backgroundColor:"mediumpurple",
    canDragResize:true,
    dragTarget:"top",
    getEventEdge:function(){return "BR"}
});
topParent.addChild(dragResizeBox);

</SCRIPT>
</BODY>
</HTML>
